// Fonts
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;600;700;800&display=swap");

@import url("https://use.typekit.net/bge4hzk.css");
/* App Colors */
$app-dark: #343a40;
$app-input-color: #e2e2e3;
$app-course-bg: #92929d;
$app-bg-color: rgba(#007bff, 0.05);
/* Partner colors */
// Comprara colors
// $comprara-primary: var(--theme-color,#00995E);

$comprara-primary: #00995E;
$comprara-primary-light: #0069d9;

/* Assessment Status colors */

/* Theme Color override */
$primary: $comprara-primary;
$dark: $app-dark;

// Fonts
$font-family-sans-serif: "proxima-nova", sans-serif;
$font-weight-light: 300 !default;
$font-weight-normal: 400 !default;
$font-weight-bold: 600 !default;
$font-size-base: 1rem !default;
$font-size-lg: 1rem !default;
$font-size-sm: 0.75rem !default;
$headings-font-weight: 600 !default;

// Spacer
$spacer: 1rem !default;

$spacers: (
  0: 0,
  1: (
    $spacer * 0.25,
  ),
  2: (
    $spacer * 0.5,
  ),
  3: $spacer,
  4: (
    $spacer * 1.5,
  ),
  5: (
    $spacer * 3,
  ),
  6: (
    $spacer * 4.5,
  ),
  7: (
    $spacer * 6,
  ),
) !default;

// Grid breakpoints
$grid-breakpoints: (
  xs: 0,
  sm: 576px,
  md: 768px,
  lg: 992px,
  xl: 1200px,
  xxl: 1440px,
) !default;

$grid-gutter-width: 24px !default;

// Grid containers
$container-max-widths: (
  sm: 540px,
  md: 720px,
  lg: 960px,
  xl: 1200px,
) !default;

// Options
$enable-validation-icons: false !default;

// Transitions
$transition-base: all 0.35s ease-in-out !default;

// Theme colors
$blue: #3b82ec !default;
$indigo: #6610f2 !default;
$purple: #6f42c1 !default;
$pink: #e83e8c !default;
$red: #d9534f !default;
$orange: #fd7e14 !default;
$yellow: #f0ad4e !default;
$green: #4bbf73 !default;
$teal: #20c997 !default;
$cyan: #1f9bcf !default;

$white: #fff !default;
$gray-100: #f8f9fa !default;
$gray-200: #e9ecef !default;
$gray-300: #dee2e6 !default;
$gray-400: #ced4da !default;
$gray-500: #adb5bd !default;
$gray-600: #6c757d !default;
$gray-700: #495057 !default;
$gray-800: #343a40 !default;
$gray-900: #212529 !default;
$black: #000 !default;

$primary: $blue !default;
$secondary: $gray-700 !default;
$tertiary: darken($blue, 10%) !default;
$success: $green !default;
$info: $cyan !default;
$warning: $yellow !default;
$danger: $red !default;
$light: $gray-200 !default;
$dark: #354052 !default;

$theme-colors: (
  "primary": $primary,
  "secondary": $secondary,
  "tertiary": $tertiary,
  "success": $success,
  "info": $info,
  "warning": $warning,
  "danger": $danger,
  "light": $light,
  "dark": $dark,
) !default;

// Social colors
$social-colors: (
  "facebook": #3b5998,
  "twitter": #1da1f2,
  "google": #dc4e41,
  "youtube": #f00,
  "vimeo": #1ab7ea,
  "dribbble": #ea4c89,
  "github": #181717,
  "instagram": #e4405f,
  "pinterest": #bd081c,
  "flickr": #0063dc,
  "bitbucket": #0052cc,
) !default;

// Body
$body-bg: #f7f9fc !default;
$body-color: $gray-700 !default;

// Common
$border-width: 1px !default;

// Fonts
$line-height-base: 1.5 !default;
$line-height-lg: 1.5 !default;
$line-height-sm: 1.5 !default;

// Headings
$h1-font-size: $font-size-base * 2 !default;
$h2-font-size: $font-size-base * 1.75 !default;
$h3-font-size: $font-size-base * 1.5 !default;
$h4-font-size: $font-size-base * 1.25 !default;
$h5-font-size: $font-size-base !default;
$h6-font-size: $font-size-base !default;
$headings-color: $black !default;

// Text
$text-muted: lighten($gray-600, 3);

// Progress
$progress-height: 1rem !default;
$progress-height-sm: 0.5rem !default;
$progress-height-lg: 1.5rem !default;

// Shadows
$box-shadow-sm: 0 0.05rem 0.2rem rgba(0, 0, 0, 0.05) !default;
$box-shadow: 0 0.1rem 0.2rem rgba(0, 0, 0, 0.05) !default;
$box-shadow-lg: 0 0.2rem 0.2rem rgba(0, 0, 0, 0.05) !default;

// Border radius
$border-radius-sm: 0.1rem !default;
$border-radius: 0.2rem !default;
$border-radius-lg: 0.3rem !default;

// Navbar
$navbar-padding-y: $spacer * 0.875 !default;
$navbar-padding-x: $spacer * 1.25 !default;
$navbar-nav-link-padding-x: 0.5rem !default;
$navbar-border-bottom: 0 !default;
$navbar-box-shadow: 0 0 2rem 0 rgba($dark, 0.1) !default;

// Navbar brand
$navbar-brand-padding-y: $spacer * 0.875 !default;
$navbar-brand-padding-x: 0 !default;
$navbar-brand-color: $gray-100 !default;
$navbar-brand-font-weight: $font-weight-bold !default;
$navbar-brand-font-size: 1.15rem !default;
$navbar-brand-icon-color: $primary !default;

// Alerts
$alert-padding-y: 0.95rem !default;
$alert-padding-x: 0.95rem !default;
$alert-border-width: 0 !default;
$alert-bg-level: 0 !default;

// Forms
$input-bg: $white !default;
$input-disabled-bg: $gray-200 !default;
$input-color: $gray-700 !default;
$input-btn-border-width: $border-width !default;
$input-btn-line-height: $line-height-base !default;
$input-btn-line-height-sm: $line-height-sm !default;
$input-btn-line-height-lg: $line-height-lg !default;
$input-btn-focus-width: 0.2rem !default;
$input-btn-padding-y: 0.25rem !default;
$input-btn-padding-y-sm: 0.15rem !default;
$input-btn-padding-y-lg: 0.35rem !default;
$input-btn-padding-x: 0.7rem !default;
$input-btn-font-size-lg: $font-size-lg !default;
$input-border-width: $input-btn-border-width !default;
$input-height-border: $input-border-width * 2 !default;
$input-height-inner: ($font-size-base * $input-btn-line-height) +
  ($input-btn-padding-y * 2) !default;
$input-height: calc(#{$input-height-inner} + #{$input-height-border}) !default;
$input-height-inner-sm: ($font-size-sm * $input-btn-line-height-sm) +
  ($input-btn-padding-y-sm * 2) !default;
$input-height-sm: calc(
  #{$input-height-inner-sm} + #{$input-height-border}
) !default;
$input-height-inner-lg: ($font-size-lg * $input-btn-line-height-lg) +
  ($input-btn-padding-y-lg * 2) !default;
$input-height-lg: calc(
  #{$input-height-inner-lg} + #{$input-height-border}
) !default;

// Custom controls
$custom-control-indicator-bg: $gray-300 !default;
$custom-control-indicator-disabled-bg: $gray-200 !default;

// Dropdowns
$dropdown-link-color: $gray-700 !default;
$dropdown-link-hover-bg: $gray-100 !default;
$dropdown-item-padding-y: 0.35rem !default;
$dropdown-item-padding-x: 1.5rem !default;

// Cards
$card-border-radius: 0.75rem;
$card-inner-border-radius: $card-border-radius !default;
$card-border-width: 0 !default;
$card-border-color: transparent !default;
$card-cap-bg: $white !default;
$card-shadow: 0 0 0.875rem 0 rgba($dark, 0.05) !default;
$card-title-font-weight: $font-weight-normal !default;
$card-title-color: $gray-700 !default;
$card-spacer-y: 1rem !default;

// Tables
$table-accent-bg: $gray-100 !default;

// Sidebar general
$sidebar-width: 260px !default;
$sidebar-transition: margin-left 0.35s ease-in-out, left 0.35s ease-in-out !default;
$sidebar-bg: $dark;
$sidebar-border: 0 !default;

// Sidebar brand
$sidebar-brand-padding-y: 1.15rem !default;
$sidebar-brand-padding-x: 1.7rem !default;
$sidebar-brand-color: $gray-100 !default;
$sidebar-brand-font-weight: $font-weight-bold !default;
$sidebar-brand-font-size: 1.15rem !default;
$sidebar-brand-icon-color: lighten($primary, 5%) !default;

// Sidebar header
$sidebar-header-padding: 1.125rem 1.7rem 0.375rem !default;
$sidebar-header-color: $gray-500 !default;
$sidebar-header-text-transform: none !default;
$sidebar-header-font-size: $font-size-sm !default;

// Sidebar link
$sidebar-link-padding: 0.7rem 1.7rem !default;
$sidebar-link-font-weight: $font-weight-bold;
$sidebar-link-color: rgba($white, 0.55) !default;
$sidebar-link-bg: transparent !default;
$sidebar-link-hover-color: rgba($white, 0.9) !default;
$sidebar-link-hover-bg: rgba($primary, 0.3);
$sidebar-link-hover-font-weight: $font-weight-normal !default;
$sidebar-link-active-color: $sidebar-link-hover-color !default;
$sidebar-link-active-bg: transparent !default;
$sidebar-link-active-font-weight: $font-weight-normal !default;

// Sidebar child link
$sidebar-link-child-padding: 0.55rem 1.7rem 0.55rem 3.75rem !default;
$sidebar-link-child-font-weight: 400 !default;
$sidebar-link-child-color: rgba($white, 0.55) !default;
$sidebar-link-child-bg: transparent !default;
$sidebar-link-child-hover-color: rgba($white, 0.9) !default;
$sidebar-link-child-hover-bg: transparent !default;
$sidebar-link-child-active-color: $sidebar-link-child-hover-color !default;
$sidebar-link-child-active-bg: transparent !default;

// Sidebar child link nested
$sidebar-link-child-second-padding: 0.55rem 1.5rem 0.55rem 4.3rem !default;
$sidebar-link-child-third-padding: 0.55rem 1.5rem 0.55rem 5.05rem !default;

// Sidebar link icon
$sidebar-link-icon-color: $white !default;
$sidebar-link-icon-hover-color: $white !default;
$sidebar-link-icon-active-color: $white !default;

// Sidebar bottom
$sidebar-bottom-color: $gray-200 !default;
$sidebar-bottom-bg: $black;

// Transitions
$transition-appearance: background 0.4s ease-in-out, color 0.4s ease-in-out !default;
$transition-appearance-slow: background 0.6s ease-in-out, color 0.6s ease-in-out !default;
$transition-appearance-fast: background 0.1s ease-in-out, color 0.1s ease-in-out !default;

// Modals
$modal-content-border-width: 0 !default;
$modal-header-border-width: 1px !default;
$modal-footer-border-width: 1px !default;
$modal-xl: 1140px !default;
$modal-lg: 900px !default;
$modal-md: 600px !default;
$modal-sm: 400px !default;
$modal-transition: transform 0.25s ease-out !default;

// Tabs
$tab-content-padding: $spacer * 1.25 !default;
$tab-content-box-shadow: 0 0.2rem 0.1rem -0.1rem rgba(0, 0, 0, 0.15) !default;
$tab-content-border-radius: 0 0 $border-radius $border-radius !default;
$tab-link-color: $gray-800 !default;
$tab-link-padding: ($spacer * 0.75) $spacer !default;
$tab-link-bg: transparent !default;
$tab-link-active-color: $gray-800 !default;
$tab-link-active-bg: $white !default;

// Badges
$badge-font-size: 80% !default;
$badge-padding-y: 0.3em !default;
$badge-padding-x: 0.45em !default;
$badge-pill-padding-x: 0.65em !default;

// Breadcrumbs
$breadcrumb-bg: $gray-200 !default;

// Pagination
$pagination-padding-y: 0.3rem !default;
$pagination-padding-x: 0.75rem !default;
$pagination-padding-y-sm: 0.15rem !default;
$pagination-padding-x-sm: 0.5rem !default;
$pagination-padding-y-lg: 0.35rem !default;
$pagination-padding-x-lg: 1rem !default;
$pagination-color: $gray-600 !default;
$pagination-hover-color: $gray-800 !default;

// Content
$content-padding: 2.5rem 2.5rem 1.5rem !default;

// Datetimepicker
$bs-datetimepicker-active-bg: $primary !default;

// Simplebar
$simplebar-scrollbar-bg: $white !default;

// Hamburger
$hamburger-width-top: 24px !default;
$hamburger-width-middle: 24px !default;
$hamburger-width-bottom: 24px !default;
